<template>
  <table-view
    v-bind="tableProps"
    v-model="model"
    @get-data="getData"
  >
    <template v-slot:test="{row, index}">
      插槽测试{{index}} - {{row.name}}
    </template>
  </table-view>
</template>

<script>
  import {tableHelper} from 'utils/table-helper';
  import setDictionary from 'utils/set-dictionary';
  import {proxyCache} from 'utils';

  function tableData(key) {
    const list = new Array(10);
    const image =
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';
    list.fill({
      date: `${key} - ${Math.random().toFixed(2)}`,
      name: `${key} - 王小虎`,
      address: `${key} - 上海市普陀区金沙江路 1518 弄`,
      image,
      btn: 'test'
    });
    return list;
  }

  export default {
    name: 'example-7',
    computed: {
      tableProps() {
        const {total, tableData, tableOptions} = this;
        return {
          total,
          tableOptions,
          tableData
        };
      }
    },
    data() {
      return {
        loading: false,
        total: 100,
        tableOptions: {
          index: true,
          columns: [
            tableHelper.image('图片', 'image'),
            tableHelper.default('日期', 'date', '提示文案'),
            tableHelper.default('姓名', 'name', '提示文案'),
            tableHelper.default('地址', 'date'),
            tableHelper.slot('插槽测试', 'test'),
            tableHelper.btn('单按钮', '按钮名', (row, index) => {
              console.log(row, index);
            }),
            tableHelper.btnGroup('按钮组', [
              {
                label: '按钮1',
                handler: (row, index) => {
                  console.log(row, index);
                }
              },
              {
                label: '按钮2',
                handler: (row, index) => {
                  console.log(row, index);
                }
              }
            ])
          ]
        },
        tableData: [],
        tabs: [
          setDictionary('全部', 1),
          setDictionary('上架', 2),
          setDictionary('下架', 3)
        ],
        model: {},
        proxyMethod: proxyCache('tableData', this.cacheRender, this.asyncRender)
      };
    },
    methods: {
      cacheRender(cache, key, name) {
        this[name] = cache[key];
      },
      asyncRender(cache, key) {
        return new Promise(resolve => {
          setTimeout(() => {
            resolve(tableData(key));
          }, 1000);
        });
      },
      getData({page, size}, cb) {
        console.log('get data', page, size);
        // console.log(this.model.filter);
        this.proxyMethod(page).then(() => {
          cb();
        });
      }
    }
  };
</script>

<style scoped>
</style>
